<template>
  <div class="bodyStyle" ref="wrapper" style="height:100%;overflow-y: auto;">
    <!--<transition :name="transitionName">
        <router-view></router-view>
    </transition>-->
    <!--<keep-alive>-->
    <!--<router-view></router-view>-->
    <!--</keep-alive>-->

      <transition :name="transitionName">
        <keep-alive>
          <router-view  :class="{'Router' : istransition}" v-if="$route.meta.keepAlive"></router-view>
　　　   </keep-alive>

      </transition>

    <transition :name="transitionName">
      <router-view  :class="{'Router' : istransition}" v-if="!$route.meta.keepAlive"></router-view>
    </transition>
    <dc-actionSheet></dc-actionSheet>
    <dc-datePicker></dc-datePicker>
    <dc-datePickerym></dc-datePickerym>
    <dc-datePickern></dc-datePickern>
  </div>
</template>

<script>
import actionSheet from '@/common/plugins/actionSheet';
import datePicker from '@/common/plugins/datepicker/datePicker';
import datePickerym from '@/common/plugins/datepicker/datePickerYM';
import datePickern from '@/common/plugins/datepicker/datePickerY';
import scrollBatter from '@/common/scrollBatter';

/**
 * App component.
 * @module App
 * @author ashen
 * @description 总视图
 */

var transitionList = [
  'bizAnalysis',
  'passenger',
  'dishAnalysis',
  'storeDatas',
  'employe',
  'riskAudit',
  'financialAnalysis',
  'takeBusiness'
];
export default {
  name: 'app',
  components: {
    'dc-actionSheet': actionSheet,
    'dc-datePicker': datePicker,
    'dc-datePickerym': datePickerym,
    'dc-datePickern': datePickern
  },
  data () {
    return {
      /** @property {string}  transitionName - 页面过渡效果.
       *  @default
       * */
      transitionName: 'slide-right',
      scroll: {},
      istransition: false
    };
  },
  created () {
    this.$nextTick(function () {
      setTimeout(() => {
        this.scroll = scrollBatter.scrollBatter();
      }, 500);
    });
  },
  beforeRouteUpdate (to, from, next) {
    setTimeout(() => {
      this.scroll('content-body');
    }, 500);
    if (to.name === 'reports' && (~transitionList.findIndex((v) => from.name === v))) {
      this.transitionName = 'slide-right';
      this.istransition = true;
    } else if (from.name === 'reports' && (~transitionList.findIndex((v) => to.name === v))) {
      this.transitionName = 'slide-left';
      this.istransition = true;
    } else if (from.name === 'reports') {
      this.transitionName = '';
      this.istransition = false;
    } else {
      this.transitionName = '';
      this.istransition = false;
    }
    next();
  }
};
</script>

<style>
.bodyStyle {
  position: fixed;
  width: 100%;
  min-height: 100%;
  z-index: 1;
  overflow-y: auto;
  /*-webkit-overflow-scrolling : touch;*/
}
body {
  /* position: fixed; */
  width: 100%;
  /* height: 100%; */
  overflow-y: auto;
}
.Router {
  position: absolute;
  width: 100%;
  transition: all .5s cubic-bezier(.55,0,.1,1);
}
.slide-left-enter, .slide-left-leave-active {
 /* opacity: 0; */
 -webkit-transform: translate(100%, 0);
 transform: translate(100%, 0);
}
.slide-right-leave-active, .slide-right-enter {
 /* opacity: 0; */
 -webkit-transform: translate(-100%, 0);
 transform: translate(-100%, 0);
}
</style>
